<template>
  <div class="virtual-currency-container">
    <!-- 头部 -->
    <div class="virtual-currency" :style="`background-image:url(${virtualBg});background-repeat:no-repeat;background-size:100% 100%;background-position:center;`">
      <p class="num">{{virtual_currency}}</p>
      <p class="name">我的{{virtual_currency_title}}</p>
    </div>
    <!--  -->

    <div class="tab-nav"
         v-if="is_virtual_rank == 1">
      <span :class="type==1?'show':''"
            @click="clickItem(1)">
        {{virtual_currency_title}}明细
        <i></i>
      </span>
      <span :class="type==2?'show':''"
            @click="clickItem(2)">
        {{virtual_currency_title}}排行
        <i></i>
      </span>
    </div>

    <virtual-currency-log v-show="type==1" ref="virtualLog"></virtual-currency-log>
    <virtual-currency-rank :virtualCurrency='virtual_currency' ref="virtualRank"
                           v-if="is_virtual_rank == 1"
                           v-show="type==2"></virtual-currency-rank>
  </div>
</template>

<script>
import { getVirtualCurrencyInfo } from '@/api/user/member/memberApi'
import noData from '@/components/noData/index'
import virtualCurrencyLog from './components/virtualCurrencyLog/index'
import virtualCurrencyRank from './components/virtualCurrencyRank/index'
import Vue from 'vue'
export default Vue.extend({
  name: 'index',
  components: {
    noData,
    virtualCurrencyLog,
    virtualCurrencyRank
  },
  data() {
    return {
      type: 1,
      virtualBg: 'https://img.wifenxiao.com/h5-wfx/images/user/virtual_currency_bg.png',
      virtual_currency_title: '',
      virtual_currency: '',
      is_virtual_rank: '' // 虚拟币排行开关
    }
  },
  methods: {

    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      getVirtualCurrencyInfo().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
            wx.setNavigationBarTitle({
             title: res.data.ftitle_virtual_currency
            })
          if (res.data.virtualBg) this.virtualBg = res.data.virtualBg
          this.is_virtual_rank = res.data.is_virtual_rank
          this.virtual_currency_title = res.data.virtual_currency_title
          this.virtual_currency = res.data.virtual_currency
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 切换提现明细和余额变动记录
    clickItem(i) {
      if (i != this.type) {
        this.type = i
      }
    }
  },
  beforeCreate() {
    // $('body').addClass('bg_white')
    document.getElementsByTagName('body')[0].classList.add('bg_white')
  },
  destroyed() {
    // $('body').removeClass('bg_white')
    document.getElementsByTagName('body')[0].classList.remove('bg_white')
  },
  created() {
    this.init()
  },
  mounted() {
    // 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      if(this.type==1){
        this.$refs.virtualLog.onLoad()
      }else if(this.type==2){
        this.$refs.virtualRank.onLoad()
      }
    })
  },
})
</script>

<style lang="scss">
@import "../../../../styles/mixin";
.virtual-currency-container {
  .virtual-currency {
    width: 700px;
    height: 280px;
    padding-top: 92px;
    background: url(https://img.wifenxiao.com/h5-wfx/images/user/virtual_currency_bg.png)
      no-repeat;
    background-size: 100%;
    text-align: center;
    margin: 20px auto 0;
    .name {
      margin-top: 20px;
      font-size: 26px;
      color: #ffd9dd;
    }
    .num {
      font-size: 50px;
      color: #fff;
    }
  }
  .tab-nav {
    // border-bottom: 4px solid #f3f3f3;
    // border-width: 4px;
    display: flex;
    justify-content: space-between;
    span {
      position: relative;
      flex: 1;
      height: 106px;
      line-height: 106px;
      font-size: 32px;
      font-weight: normal;
      text-align: center;
      color: #333333;
      &.show {
        color: #f20b22;
        i {
          display: block;
          position: absolute;
          bottom: -2px;
          left: 50%;
          height: 5px;
          width: 56px;
          border-radius: 3px;
          transform: translateX(-50%);
          background: #f20b22;
        }
      }
    }
  }
}
</style>